<template>
  <view class="block">
    <view v-if="titleBlock" class="title-block">
      <view class="title" @click="onClickTitle">
        <text class="text">{{ title }}</text>
        <slot name="titleRight"></slot>
      </view>
    </view>
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'thCard',
  components: {},
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    titleBlock: {
      type: Boolean,
      default: true,
    },
  },
  created() {},
  methods: {
    onClickTitle() {
      this.$emit('onClickTitle');
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  padding: 24rpx 0;
  margin-bottom: 24rpx;
  background-color: #fff;

  &.has_item {
    padding: 24rpx;

    > .title {
      margin-left: 12rpx;
    }
  }

  > .title-block {
    padding: 12rpx 24rpx 24rpx;

    .title {
      // border-left: 8rpx solid #0081FF;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      // margin-left: 12rpx;
      // margin-bottom: 24rpx;
      padding-left: 24rpx;

      &::after {
        position: absolute;
        top: 4rpx;
        bottom: 4rpx;
        left: 0;
        width: 8rpx;
        content: '';
        background-color: #2e5cf6;
        border-radius: 3rpx;
      }

      .text {
        font-size: 1.0625rem;
        font-weight: bold;
        color: #000;
      }

      // font-weight: bold;
    }
  }

  > .title {
    // border-left: 8rpx solid #0081FF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 12rpx;

    &::after {
      position: absolute;
      top: 4rpx;
      bottom: 4rpx;
      left: 0;
      width: 8rpx;
      content: '';
      background-color: #2e5cf6;
      border-radius: 3rpx;
    }

    .text {
      font-size: 1.0625rem;
      font-weight: bold;
      color: #000;
    }

    // font-weight: bold;
  }

  .content {
    padding: 0 24rpx;
  }
}
</style>
